<template>
  <view class="container">
    <!-- 编辑公司信息 -->
    <view class="section">
      <view class="section-header">
        <text class="title">编辑公司信息</text>
      </view>
      <view class="description">您的公司的主页内容已全部填写完成，可以随时进行优化，为你的职位带来更多查看与沟通。</view>
    </view>

    <!-- 基本信息 -->
    <view class="section" @click="toggleSection('basicInfo')">
      <view class="section-header">
        <view class="section-content">
          <text class="title">基本信息</text>
          <text class="progress">{{ getProgress('basicInfo') }}</text>
        </view>
        <uni-icons
          :type="expandedSection === 'basicInfo' ? 'arrowup' : 'arrowdown'"
          size="16"
          color="#D8D8D8"
        ></uni-icons>
      </view>
      <view v-if="expandedSection === 'basicInfo'" class="sub-section">
        <view class="sub-item" @click.stop="navigateTo('brandLogo')">
          品牌logo
          <view class="sub-right">
            <text class="sub-item-value">{{ formData.brandLogo || '未设置' }}</text>
            <uni-icons type="arrowright" size="16" color="#D8D8D8"></uni-icons>
          </view>
        </view>
        <view class="sub-item" @click.stop="navigateTo('companyName')">
          公司名称
          <view class="sub-right">
            <text class="sub-item-value">{{ formData.companyName || '未设置' }}</text>
            <uni-icons type="arrowright" size="16" color="#D8D8D8"></uni-icons>
          </view>
        </view>
        <view class="sub-item" @click.stop="navigateTo('industry')">
          行业
          <view class="sub-right">
            <text class="sub-item-value">{{ formData.industry || '未设置' }}</text>
            <uni-icons type="arrowright" size="16" color="#D8D8D8"></uni-icons>
          </view>
        </view>
        <view class="sub-item" @click.stop="navigateTo('staffSize')">
          人员规模
          <view class="sub-right">
            <text class="sub-item-value">{{ formData.staffSize || '未设置' }}</text>
            <uni-icons type="arrowright" size="16" color="#D8D8D8"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 公司福利 -->
    <view class="section" @click="toggleSection('companyBenefits')">
      <view class="section-header">
        <view class="section-content">
          <text class="title">公司福利</text>
          <text class="progress">{{ getProgress('companyBenefits') }}</text>
        </view>
        <uni-icons
          :type="expandedSection === 'companyBenefits' ? 'arrowup' : 'arrowdown'"
          size="16"
          color="#D8D8D8"
        ></uni-icons>
      </view>
      <view v-if="expandedSection === 'companyBenefits'" class="sub-section">
        <view class="sub-item" @click.stop="navigateTo('workingHours')">
          标准工作时间
          <view class="sub-right">
            <text class="sub-item-value">{{ formData.workingHours || '未设置' }}</text>
            <uni-icons type="arrowright" size="16" color="#D8D8D8"></uni-icons>
          </view>
        </view>
        <view class="sub-item" @click.stop="navigateTo('benefits')">
          福利待遇
          <view class="sub-right">
            <text class="sub-item-value">{{ formData.benefits || '未设置' }}</text>
            <uni-icons type="arrowright" size="16" color="#D8D8D8"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 公司介绍 -->
    <view class="section" @click="navigateTo('companyIntroduction')">
      <view class="section-header">
        <text class="title">公司介绍</text>
        <view class="sub-right">
          <text class="sub-item-value">{{ formData.companyIntroduction || '未设置' }}</text>
          <uni-icons type="arrowright" size="16" color="#D8D8D8"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 公司相册 -->
    <view class="section" @click="toggleSection('companyAlbum')">
      <view class="section-header">
        <view class="section-content">
          <text class="title">公司相册</text>
          <text class="progress">{{ getProgress('companyAlbum') }}</text>
        </view>
        <uni-icons
          :type="expandedSection === 'companyAlbum' ? 'arrowup' : 'arrowdown'"
          size="16"
          color="#D8D8D8"
        ></uni-icons>
      </view>
      <view v-if="expandedSection === 'companyAlbum'" class="sub-section">
        <view class="sub-item" @click.stop="navigateTo('companyPhotos')">
          公司照片
          <view class="sub-right">
            <text class="sub-item-value">{{ formData.companyPhotos || '未设置' }}</text>
            <uni-icons type="arrowright" size="16" color="#D8D8D8"></uni-icons>
          </view>
        </view>
        <view class="sub-item" @click.stop="navigateTo('companyVideos')">
          公司视频
          <view class="sub-right">
            <text class="sub-item-value">{{ formData.companyVideos || '未设置' }}</text>
            <uni-icons type="arrowright" size="16" color="#D8D8D8"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 高管介绍 -->
    <view class="section" @click="navigateTo('executiveIntroduction')">
      <view class="section-header">
        <text class="title">高管介绍</text>
        <view class="sub-right">
          <text class="sub-item-value">{{ formData.executiveIntroduction || '未设置' }}</text>
          <uni-icons type="arrowright" size="16" color="#D8D8D8"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 预览按钮 -->
    <view class="section">
      <button class="preview-button" @click="handlePreview">预览</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      expandedSection: null, // 当前展开的 section
      formData: {
        brandLogo: null,
        companyName: "佛山市知水尚远网络科技有限公司",
        industry: null,
        staffSize: null,
        workingHours: null,
        benefits: null,
        companyPhotos: null,
        companyVideos: null,
        companyIntroduction: null, // 公司介绍
        executiveIntroduction: null, // 高管介绍
      },
    };
  },
  methods: {
    // 切换 section 展开状态
    toggleSection(section) {
      if (this.expandedSection === section) {
        this.expandedSection = null; // 如果已经展开，则关闭
      } else {
        this.expandedSection = section; // 展开当前 section
      }
    },
    // 跳转到相应页面
	navigateTo(page) {
	  switch (page) {
	    case 'brandLogo':
	      uni.navigateTo({
	        url: '/pages/form/company-home/brand-logo',
	        success: (res) => {
	          // 监听 brandLogo 页面传递的数据
	          res.eventChannel.on('updateBrandLogo', (brandLogo) => {
	            this.formData.brandLogo = brandLogo;
	          });
	        },
	      });
	      break;
	
	    case 'companyName':
	      uni.navigateTo({
	        url: '/pages/form/company-home/company-name',
	        success: (res) => {
	          // 监听 companyName 页面传递的数据
	          res.eventChannel.on('updateCompanyName', (companyName) => {
	            this.formData.companyName = companyName;
	          });
	        },
	      });
	      break;
	
	    case 'industry':
	      uni.navigateTo({
	        url: '/pages/form/company-home/industry',
	        success: (res) => {
	          // 监听 industry 页面传递的数据
	          res.eventChannel.on('updateIndustry', (industry) => {
	            this.formData.industry = industry;
	          });
	        },
	      });
	      break;
	
	    case 'staffSize':
	      uni.navigateTo({
	        url: '/pages/form/company-home/staff-size',
	        success: (res) => {
	          // 监听 staffSize 页面传递的数据
	          res.eventChannel.on('updateStaffSize', (staffSize) => {
	            this.formData.staffSize = staffSize;
	          });
	        },
	      });
	      break;
	
	    case 'workingHours':
	      uni.navigateTo({
	        url: '/pages/form/company-home/working-hours',
	        success: (res) => {
	          // 监听 workingHours 页面传递的数据
	          res.eventChannel.on('updateWorkingHours', (workingHours) => {
	            this.formData.workingHours = workingHours;
	          });
	        },
	      });
	      break;
	
	    case 'benefits':
	      uni.navigateTo({
	        url: '/pages/form/company-home/benefits',
	        success: (res) => {
	          // 监听 benefits 页面传递的数据
	          res.eventChannel.on('updateBenefits', (benefits) => {
	            this.formData.benefits = benefits;
	          });
	        },
	      });
	      break;
	
	    case 'companyPhotos':
	      uni.navigateTo({
	        url: '/pages/form/company-home/company-photos',
	        success: (res) => {
	          // 监听 companyPhotos 页面传递的数据
	          res.eventChannel.on('updateCompanyPhotos', (companyPhotos) => {
	            this.formData.companyPhotos = companyPhotos;
	          });
	        },
	      });
	      break;
	
	    case 'companyVideos':
	      uni.navigateTo({
	        url: '/pages/form/company-home/company-videos',
	        success: (res) => {
	          // 监听 companyVideos 页面传递的数据
	          res.eventChannel.on('updateCompanyVideos', (companyVideos) => {
	            this.formData.companyVideos = companyVideos;
	          });
	        },
	      });
	      break;
	
	    case 'companyIntroduction':
	      uni.navigateTo({
	        url: '/pages/form/company-home/company-introduction',
	        success: (res) => {
	          // 监听 companyIntroduction 页面传递的数据
	          res.eventChannel.on('updateCompanyIntroduction', (companyIntroduction) => {
	            this.formData.companyIntroduction = companyIntroduction;
	          });
	        },
	      });
	      break;
	
	    case 'executiveIntroduction':
	      uni.navigateTo({
	        url: '/pages/form/company-home/executive-introduction',
	        success: (res) => {
	          // 监听 executiveIntroduction 页面传递的数据
	          res.eventChannel.on('updateExecutiveIntroduction', (executiveIntroduction) => {
	            this.formData.executiveIntroduction = executiveIntroduction;
	          });
	        },
	      });
	      break;
	
	    default:
	      uni.showToast({
	        title: '页面未定义',
	        icon: 'none',
	      });
	  }
	},
 
	// 预览按钮点击事件
    handlePreview() {
		uni.navigateTo({
		  url: '/pages/form/company-home/preview', // 用户协议页面路径
		});
     /* uni.showToast({
        title: '预览功能待实现',
        icon: 'none',
      }); */
    },
    // 计算二级目录填写占比
    getProgress(section) {
      const sectionData = {
        basicInfo: ['brandLogo', 'companyName', 'industry', 'staffSize'],
        companyBenefits: ['workingHours', 'benefits'],
        companyAlbum: ['companyPhotos', 'companyVideos'],
      };

      const fields = sectionData[section] || [];
      const total = fields.length;
      const filled = fields.filter(field => this.formData[field] !== null).length;

      return `${filled}/${total}`;
    },
    // 从设置页面返回数据
    onLoad(options) {
      if (options.data) {
        const data = JSON.parse(options.data);
        this.formData = { ...this.formData, ...data };
      }
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
}

.section {
  margin-bottom: 20px;
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: #151515;
  font-size: 16px;
}

.section-content {
  display: flex;
  align-items: center;
}

.progress {
  margin: auto 5px 0;
  font-size: 14px;
  color: #666;
}

.sub-section {
  margin-top: 10px;
}

.sub-item {
  height: 50px;
  font-size: 13px;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub-item-value {
  font-size: 13px;
  color: #999;
  margin-right: 10px;
}

.preview-button {
  width: 100%;
  		height: 80rpx;
  		line-height: 80rpx;
      background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
    	border-radius: 32px;
  		font-size: 32rpx;
  		color: #fff;
  		text-align: center;
}

</style>